<template>
	<view class="tabbar" :style="{paddingBottom:safeArea+'px'}">
		<view class="tabbar-item" v-for="(item,index) in Tabbar" :key="index">
			<view class="tabbar-icon" @click="routeChang(index)">
				<image class="tabbar-img" :src="current==index?item.selectedIconPath:item.iconPath"></image>
			</view>
			<view class="tabbar-name">{{item.name}}</view>
		</view>
	</view>
</template>

<script>
	export default {
		name:"Tabbar",
		data() {
			return {
				Tabbar:[
					{
						name:'首页',
						iconPath:'/static/tabar/sym.png',
						selectedIconPath:'/static/tabar/syl.png'
					},
					{
						name:'订单',
						iconPath:'/static/tabar/ddm.png',
						selectedIconPath:'/static/tabar/ddl.png'
					},
					{
						name:'发现',
						iconPath:'/static/tabar/fxm.png',
						selectedIconPath:'/static/tabar/fxl.png'
					},
					{
						name:'我的',
						iconPath:'/static/tabar/wdm.png',
						selectedIconPath:'/static/tabar/wdl.png'
					}
				],
				current:0
			};
		},
		methods:{
			routeChang(index){
				this.current = index
				this.$emit('chang',this.current)
			}
		}
	}
</script>

<style lang="scss">
.tabbar{
	position: fixed;
	bottom: 0;
	width: 100%;
	min-height:50px;
	padding-top: 5px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	border-top: 1px solid #ECECEC;
	.tabbar-item{
		width: 25%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		font-size: 25rpx;
		color: #909399;
		.tabbar-icon{
			position: relative;
			margin-bottom: 3px;
			.tabbar-img{
				width: 48rpx;
				height: 48rpx;
			}
		}
	}
}
</style>